<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>IconFont Demo</title>
  <link rel="shortcut icon" href="https://gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1631190" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ea;</span>
                <div class="name">compass</div>
                <div class="code-name">&amp;#xe6ea;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6eb;</span>
                <div class="name">cloud3</div>
                <div class="code-name">&amp;#xe6eb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6fc;</span>
                <div class="name">desktop</div>
                <div class="code-name">&amp;#xe6fc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe707;</span>
                <div class="name">document</div>
                <div class="code-name">&amp;#xe707;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe708;</span>
                <div class="name">documents</div>
                <div class="code-name">&amp;#xe708;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe70c;</span>
                <div class="name">download2</div>
                <div class="code-name">&amp;#xe70c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71d;</span>
                <div class="name">expand2</div>
                <div class="code-name">&amp;#xe71d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe723;</span>
                <div class="name">edit2</div>
                <div class="code-name">&amp;#xe723;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe725;</span>
                <div class="name">envelope</div>
                <div class="code-name">&amp;#xe725;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe73d;</span>
                <div class="name">focus</div>
                <div class="code-name">&amp;#xe73d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe74b;</span>
                <div class="name">flag3</div>
                <div class="code-name">&amp;#xe74b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe751;</span>
                <div class="name">grid2</div>
                <div class="code-name">&amp;#xe751;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe75a;</span>
                <div class="name">hourglass</div>
                <div class="code-name">&amp;#xe75a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe763;</span>
                <div class="name">heart2</div>
                <div class="code-name">&amp;#xe763;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe76b;</span>
                <div class="name">key</div>
                <div class="code-name">&amp;#xe76b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe786;</span>
                <div class="name">laptop</div>
                <div class="code-name">&amp;#xe786;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe794;</span>
                <div class="name">layers2</div>
                <div class="code-name">&amp;#xe794;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe797;</span>
                <div class="name">lifesaver</div>
                <div class="code-name">&amp;#xe797;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe798;</span>
                <div class="name">lightbulb</div>
                <div class="code-name">&amp;#xe798;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe79a;</span>
                <div class="name">linegraph</div>
                <div class="code-name">&amp;#xe79a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b0;</span>
                <div class="name">lock3</div>
                <div class="code-name">&amp;#xe7b0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c2;</span>
                <div class="name">megaphone</div>
                <div class="code-name">&amp;#xe7c2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c9;</span>
                <div class="name">mic2</div>
                <div class="code-name">&amp;#xe7c9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7cd;</span>
                <div class="name">map2</div>
                <div class="code-name">&amp;#xe7cd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ce;</span>
                <div class="name">map-pin</div>
                <div class="code-name">&amp;#xe7ce;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7f5;</span>
                <div class="name">newspaper</div>
                <div class="code-name">&amp;#xe7f5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe800;</span>
                <div class="name">paintbrush</div>
                <div class="code-name">&amp;#xe800;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe805;</span>
                <div class="name">paperclip</div>
                <div class="code-name">&amp;#xe805;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe80f;</span>
                <div class="name">phone2</div>
                <div class="code-name">&amp;#xe80f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe812;</span>
                <div class="name">pencil</div>
                <div class="code-name">&amp;#xe812;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe839;</span>
                <div class="name">picture</div>
                <div class="code-name">&amp;#xe839;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe83b;</span>
                <div class="name">pictures</div>
                <div class="code-name">&amp;#xe83b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe83c;</span>
                <div class="name">piechart</div>
                <div class="code-name">&amp;#xe83c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe83f;</span>
                <div class="name">profile-female</div>
                <div class="code-name">&amp;#xe83f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe840;</span>
                <div class="name">profile-male</div>
                <div class="code-name">&amp;#xe840;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe842;</span>
                <div class="name">puzzle</div>
                <div class="code-name">&amp;#xe842;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe84c;</span>
                <div class="name">presentation</div>
                <div class="code-name">&amp;#xe84c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe84d;</span>
                <div class="name">pricetags</div>
                <div class="code-name">&amp;#xe84d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe850;</span>
                <div class="name">printer2</div>
                <div class="code-name">&amp;#xe850;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe852;</span>
                <div class="name">refresh2</div>
                <div class="code-name">&amp;#xe852;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe85b;</span>
                <div class="name">quote</div>
                <div class="code-name">&amp;#xe85b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe860;</span>
                <div class="name">recycle</div>
                <div class="code-name">&amp;#xe860;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe865;</span>
                <div class="name">ribbon2</div>
                <div class="code-name">&amp;#xe865;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe86a;</span>
                <div class="name">scissors</div>
                <div class="code-name">&amp;#xe86a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe86b;</span>
                <div class="name">scope</div>
                <div class="code-name">&amp;#xe86b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe885;</span>
                <div class="name">search3</div>
                <div class="code-name">&amp;#xe885;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe88c;</span>
                <div class="name">shield</div>
                <div class="code-name">&amp;#xe88c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe89e;</span>
                <div class="name">speedometer</div>
                <div class="code-name">&amp;#xe89e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8b2;</span>
                <div class="name">strategy</div>
                <div class="code-name">&amp;#xe8b2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8b3;</span>
                <div class="name">streetsign</div>
                <div class="code-name">&amp;#xe8b3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8c0;</span>
                <div class="name">tablet</div>
                <div class="code-name">&amp;#xe8c0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8c5;</span>
                <div class="name">target2</div>
                <div class="code-name">&amp;#xe8c5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8d1;</span>
                <div class="name">toolbox</div>
                <div class="code-name">&amp;#xe8d1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8d2;</span>
                <div class="name">tools</div>
                <div class="code-name">&amp;#xe8d2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8d3;</span>
                <div class="name">tools-2</div>
                <div class="code-name">&amp;#xe8d3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8d8;</span>
                <div class="name">telescope</div>
                <div class="code-name">&amp;#xe8d8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8e6;</span>
                <div class="name">upload2</div>
                <div class="code-name">&amp;#xe8e6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8ed;</span>
                <div class="name">trophy</div>
                <div class="code-name">&amp;#xe8ed;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8fc;</span>
                <div class="name">video2</div>
                <div class="code-name">&amp;#xe8fc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9a6;</span>
                <div class="name">bankcard</div>
                <div class="code-name">&amp;#xe9a6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9a7;</span>
                <div class="name">idcard</div>
                <div class="code-name">&amp;#xe9a7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9a9;</span>
                <div class="name">phone</div>
                <div class="code-name">&amp;#xe9a9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe600;</span>
                <div class="name">185029 - ipod streamline</div>
                <div class="code-name">&amp;#xe600;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe602;</span>
                <div class="name">185030 - cook pan pot streamline</div>
                <div class="code-name">&amp;#xe602;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe603;</span>
                <div class="name">185031 - shoes snickers streamline</div>
                <div class="code-name">&amp;#xe603;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe604;</span>
                <div class="name">185032 - ipad streamline</div>
                <div class="code-name">&amp;#xe604;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe605;</span>
                <div class="name">185033 - ipod music streamline</div>
                <div class="code-name">&amp;#xe605;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe606;</span>
                <div class="name">185034 - ipod mini music streamline</div>
                <div class="code-name">&amp;#xe606;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe607;</span>
                <div class="name">185035 - computer streamline</div>
                <div class="code-name">&amp;#xe607;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe608;</span>
                <div class="name">185036 - remote control streamline</div>
                <div class="code-name">&amp;#xe608;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe609;</span>
                <div class="name">185037 - browser streamline window</div>
                <div class="code-name">&amp;#xe609;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60a;</span>
                <div class="name">185020 - macintosh</div>
                <div class="code-name">&amp;#xe60a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60b;</span>
                <div class="name">185021 - bomb bug</div>
                <div class="code-name">&amp;#xe60b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60c;</span>
                <div class="name">185022 - computer macintosh vintage</div>
                <div class="code-name">&amp;#xe60c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60d;</span>
                <div class="name">185023 - computer imac</div>
                <div class="code-name">&amp;#xe60d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60e;</span>
                <div class="name">185024 - computer imac</div>
                <div class="code-name">&amp;#xe60e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60f;</span>
                <div class="name">185025 - ibook laptop</div>
                <div class="code-name">&amp;#xe60f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe610;</span>
                <div class="name">185026 - laptop macbook streamline</div>
                <div class="code-name">&amp;#xe610;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe611;</span>
                <div class="name">185027 - computer network streamline</div>
                <div class="code-name">&amp;#xe611;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe613;</span>
                <div class="name">185028 - iphone streamline</div>
                <div class="code-name">&amp;#xe613;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe614;</span>
                <div class="name">185047 - pen streamline</div>
                <div class="code-name">&amp;#xe614;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe615;</span>
                <div class="name">185048 - pen streamline</div>
                <div class="code-name">&amp;#xe615;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe616;</span>
                <div class="name">185049 - design pencil rule streamline</div>
                <div class="code-name">&amp;#xe616;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe617;</span>
                <div class="name">185050 - eye dropper streamline</div>
                <div class="code-name">&amp;#xe617;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe618;</span>
                <div class="name">185051 - crop streamline</div>
                <div class="code-name">&amp;#xe618;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe619;</span>
                <div class="name">185052 - paint bucket streamline</div>
                <div class="code-name">&amp;#xe619;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61a;</span>
                <div class="name">185053 - brush paint streamline</div>
                <div class="code-name">&amp;#xe61a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61b;</span>
                <div class="name">185054 - painting roll streamline</div>
                <div class="code-name">&amp;#xe61b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61c;</span>
                <div class="name">185055 - painting pallet streamline</div>
                <div class="code-name">&amp;#xe61c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61d;</span>
                <div class="name">185038 - home house streamline</div>
                <div class="code-name">&amp;#xe61d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61e;</span>
                <div class="name">185039 - earth globe streamline</div>
                <div class="code-name">&amp;#xe61e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61f;</span>
                <div class="name">185040 - map pin streamline</div>
                <div class="code-name">&amp;#xe61f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe620;</span>
                <div class="name">185041 - arrow streamline target</div>
                <div class="code-name">&amp;#xe620;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe621;</span>
                <div class="name">185042 - edit modify streamline</div>
                <div class="code-name">&amp;#xe621;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe622;</span>
                <div class="name">185043 - ink pen streamline</div>
                <div class="code-name">&amp;#xe622;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe623;</span>
                <div class="name">185044 - pen streamline</div>
                <div class="code-name">&amp;#xe623;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe624;</span>
                <div class="name">185045 - pen streamline</div>
                <div class="code-name">&amp;#xe624;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe626;</span>
                <div class="name">185046 - design graphic tablet streamline tablet</div>
                <div class="code-name">&amp;#xe626;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe627;</span>
                <div class="name">185056 - stamp streamline</div>
                <div class="code-name">&amp;#xe627;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe628;</span>
                <div class="name">185057 - magic magic wand streamline</div>
                <div class="code-name">&amp;#xe628;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe629;</span>
                <div class="name">185058 - grid lines streamline</div>
                <div class="code-name">&amp;#xe629;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62a;</span>
                <div class="name">185059 - handle streamline vector</div>
                <div class="code-name">&amp;#xe62a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62b;</span>
                <div class="name">185060 - magnet streamline</div>
                <div class="code-name">&amp;#xe62b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62c;</span>
                <div class="name">185061 - photo pictures streamline</div>
                <div class="code-name">&amp;#xe62c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62d;</span>
                <div class="name">185062 - camera photo streamline</div>
                <div class="code-name">&amp;#xe62d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62e;</span>
                <div class="name">185063 - camera photo polaroid streamline</div>
                <div class="code-name">&amp;#xe62e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62f;</span>
                <div class="name">185064 - picture streamline</div>
                <div class="code-name">&amp;#xe62f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe630;</span>
                <div class="name">185065 - frame picture streamline</div>
                <div class="code-name">&amp;#xe630;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe631;</span>
                <div class="name">185066 - picture streamline</div>
                <div class="code-name">&amp;#xe631;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe632;</span>
                <div class="name">185067 - camera streamline video</div>
                <div class="code-name">&amp;#xe632;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe633;</span>
                <div class="name">185068 - music note streamline</div>
                <div class="code-name">&amp;#xe633;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe635;</span>
                <div class="name">185069 - headset sound streamline</div>
                <div class="code-name">&amp;#xe635;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe636;</span>
                <div class="name">185070 - micro record streamline</div>
                <div class="code-name">&amp;#xe636;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe637;</span>
                <div class="name">185071 - music speaker streamline</div>
                <div class="code-name">&amp;#xe637;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe638;</span>
                <div class="name">185072 - book read streamline</div>
                <div class="code-name">&amp;#xe638;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe639;</span>
                <div class="name">185073 - book dowload streamline</div>
                <div class="code-name">&amp;#xe639;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63a;</span>
                <div class="name">185083 - like love streamline</div>
                <div class="code-name">&amp;#xe63a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63b;</span>
                <div class="name">185084 - crown king streamline</div>
                <div class="code-name">&amp;#xe63b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63c;</span>
                <div class="name">185085 - happy smiley streamline</div>
                <div class="code-name">&amp;#xe63c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63d;</span>
                <div class="name">185086 - map streamline user</div>
                <div class="code-name">&amp;#xe63d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63e;</span>
                <div class="name">185087 - link streamline</div>
                <div class="code-name">&amp;#xe63e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63f;</span>
                <div class="name">185088 - lock locker streamline</div>
                <div class="code-name">&amp;#xe63f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe640;</span>
                <div class="name">185089 - locker streamline unlock</div>
                <div class="code-name">&amp;#xe640;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe641;</span>
                <div class="name">185090 - delete garbage streamline</div>
                <div class="code-name">&amp;#xe641;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe642;</span>
                <div class="name">185091 - danger death delete destroy skull streamline</div>
                <div class="code-name">&amp;#xe642;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe643;</span>
                <div class="name">185074 - notebook streamline</div>
                <div class="code-name">&amp;#xe643;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe644;</span>
                <div class="name">185075 - envellope mail streamline</div>
                <div class="code-name">&amp;#xe644;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe645;</span>
                <div class="name">185076 - streamline suitcase travel</div>
                <div class="code-name">&amp;#xe645;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe646;</span>
                <div class="name">185077 - first aid medecine shield streamline</div>
                <div class="code-name">&amp;#xe646;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe647;</span>
                <div class="name">185078 - email mail streamline</div>
                <div class="code-name">&amp;#xe647;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe648;</span>
                <div class="name">185079 - bubble comment streamline talk</div>
                <div class="code-name">&amp;#xe648;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe649;</span>
                <div class="name">185080 - bubble love streamline talk</div>
                <div class="code-name">&amp;#xe649;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64a;</span>
                <div class="name">185081 - speech streamline talk user</div>
                <div class="code-name">&amp;#xe64a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64b;</span>
                <div class="name">185082 - man people streamline user</div>
                <div class="code-name">&amp;#xe64b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64c;</span>
                <div class="name">185101 - caddie shopping streamline</div>
                <div class="code-name">&amp;#xe64c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64d;</span>
                <div class="name">185102 - receipt shopping streamline</div>
                <div class="code-name">&amp;#xe64d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64e;</span>
                <div class="name">185103 - bag shopping streamline</div>
                <div class="code-name">&amp;#xe64e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64f;</span>
                <div class="name">185104 - streamline umbrella weather</div>
                <div class="code-name">&amp;#xe64f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe650;</span>
                <div class="name">185105 - drug medecine streamline syringue</div>
                <div class="code-name">&amp;#xe650;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe651;</span>
                <div class="name">185106 - armchair chair streamline</div>
                <div class="code-name">&amp;#xe651;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe652;</span>
                <div class="name">185107 - backpack streamline trekking</div>
                <div class="code-name">&amp;#xe652;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe653;</span>
                <div class="name">185108 - chaplin hat movie streamline</div>
                <div class="code-name">&amp;#xe653;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe654;</span>
                <div class="name">185109 - cocktail mojito streamline</div>
                <div class="code-name">&amp;#xe654;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe655;</span>
                <div class="name">185092 - clock streamline time</div>
                <div class="code-name">&amp;#xe655;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe656;</span>
                <div class="name">185093 - dashboard speed streamline</div>
                <div class="code-name">&amp;#xe656;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe657;</span>
                <div class="name">185094 - settings streamline</div>
                <div class="code-name">&amp;#xe657;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe658;</span>
                <div class="name">185095 - settings streamline</div>
                <div class="code-name">&amp;#xe658;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe659;</span>
                <div class="name">185096 - settings streamline</div>
                <div class="code-name">&amp;#xe659;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65a;</span>
                <div class="name">185097 - database streamline</div>
                <div class="code-name">&amp;#xe65a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65b;</span>
                <div class="name">185098 - streamline sync</div>
                <div class="code-name">&amp;#xe65b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65c;</span>
                <div class="name">185099 - factory lift streamline warehouse</div>
                <div class="code-name">&amp;#xe65c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65d;</span>
                <div class="name">185100 - caddie shop shopping streamline</div>
                <div class="code-name">&amp;#xe65d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65e;</span>
                <div class="name">185110 - diving leisure sea sport streamline</div>
                <div class="code-name">&amp;#xe65e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65f;</span>
                <div class="name">185111 - monocle mustache streamline</div>
                <div class="code-name">&amp;#xe65f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe660;</span>
                <div class="name">185112 - barista coffee espresso streamline</div>
                <div class="code-name">&amp;#xe660;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe661;</span>
                <div class="name">185113 - coffee streamline</div>
                <div class="code-name">&amp;#xe661;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe662;</span>
                <div class="name">185114 - chef food restaurant streamline</div>
                <div class="code-name">&amp;#xe662;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe663;</span>
                <div class="name">185115 - barbecue eat food streamline</div>
                <div class="code-name">&amp;#xe663;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe664;</span>
                <div class="name">185116 - eat food hotdog streamline</div>
                <div class="code-name">&amp;#xe664;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe665;</span>
                <div class="name">185117 - food ice cream streamline</div>
                <div class="code-name">&amp;#xe665;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe666;</span>
                <div class="name">185118 - japan streamline tea</div>
                <div class="code-name">&amp;#xe666;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe667;</span>
                <div class="name">185119 - eat food fork knife streamline</div>
                <div class="code-name">&amp;#xe667;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe668;</span>
                <div class="name">adjustments</div>
                <div class="code-name">&amp;#xe668;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe676;</span>
                <div class="name">alarmclock</div>
                <div class="code-name">&amp;#xe676;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67e;</span>
                <div class="name">anchor</div>
                <div class="code-name">&amp;#xe67e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67f;</span>
                <div class="name">anchor2</div>
                <div class="code-name">&amp;#xe67f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe682;</span>
                <div class="name">aperture</div>
                <div class="code-name">&amp;#xe682;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68e;</span>
                <div class="name">attachment2</div>
                <div class="code-name">&amp;#xe68e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a1;</span>
                <div class="name">book-open</div>
                <div class="code-name">&amp;#xe6a1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a9;</span>
                <div class="name">bargraph</div>
                <div class="code-name">&amp;#xe6a9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6aa;</span>
                <div class="name">basket</div>
                <div class="code-name">&amp;#xe6aa;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ac;</span>
                <div class="name">browser</div>
                <div class="code-name">&amp;#xe6ac;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b3;</span>
                <div class="name">calendar</div>
                <div class="code-name">&amp;#xe6b3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b6;</span>
                <div class="name">briefcase2</div>
                <div class="code-name">&amp;#xe6b6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c0;</span>
                <div class="name">caution</div>
                <div class="code-name">&amp;#xe6c0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c4;</span>
                <div class="name">chat2</div>
                <div class="code-name">&amp;#xe6c4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6cc;</span>
                <div class="name">camera3</div>
                <div class="code-name">&amp;#xe6cc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d1;</span>
                <div class="name">clipboard2</div>
                <div class="code-name">&amp;#xe6d1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d3;</span>
                <div class="name">clock2</div>
                <div class="code-name">&amp;#xe6d3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6da;</span>
                <div class="name">circle-compass</div>
                <div class="code-name">&amp;#xe6da;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe696;</span>
                <div class="name">民俗民风</div>
                <div class="code-name">&amp;#xe696;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe915;</span>
                <div class="name">戏曲</div>
                <div class="code-name">&amp;#xe915;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe625;</span>
                <div class="name">古镇民俗</div>
                <div class="code-name">&amp;#xe625;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe601;</span>
                <div class="name">泉州</div>
                <div class="code-name">&amp;#xe601;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe681;</span>
                <div class="name">方言小品</div>
                <div class="code-name">&amp;#xe681;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe612;</span>
                <div class="name">建筑</div>
                <div class="code-name">&amp;#xe612;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6af;</span>
                <div class="name">概况</div>
                <div class="code-name">&amp;#xe6af;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71e;</span>
                <div class="name">宗教文化</div>
                <div class="code-name">&amp;#xe71e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe684;</span>
                <div class="name">ST建筑</div>
                <div class="code-name">&amp;#xe684;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71c;</span>
                <div class="name">游记</div>
                <div class="code-name">&amp;#xe71c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe634;</span>
                <div class="name">概况 分层</div>
                <div class="code-name">&amp;#xe634;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#iconfont') format('svg');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont iconcompass"></span>
            <div class="name">
              compass
            </div>
            <div class="code-name">.iconcompass
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconcloud3"></span>
            <div class="name">
              cloud3
            </div>
            <div class="code-name">.iconcloud3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icondesktop"></span>
            <div class="name">
              desktop
            </div>
            <div class="code-name">.icondesktop
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icondocument"></span>
            <div class="name">
              document
            </div>
            <div class="code-name">.icondocument
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icondocuments"></span>
            <div class="name">
              documents
            </div>
            <div class="code-name">.icondocuments
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icondownload2"></span>
            <div class="name">
              download2
            </div>
            <div class="code-name">.icondownload2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconexpand2"></span>
            <div class="name">
              expand2
            </div>
            <div class="code-name">.iconexpand2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconedit2"></span>
            <div class="name">
              edit2
            </div>
            <div class="code-name">.iconedit2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconenvelope"></span>
            <div class="name">
              envelope
            </div>
            <div class="code-name">.iconenvelope
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfocus"></span>
            <div class="name">
              focus
            </div>
            <div class="code-name">.iconfocus
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconflag3"></span>
            <div class="name">
              flag3
            </div>
            <div class="code-name">.iconflag3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icongrid2"></span>
            <div class="name">
              grid2
            </div>
            <div class="code-name">.icongrid2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconhourglass"></span>
            <div class="name">
              hourglass
            </div>
            <div class="code-name">.iconhourglass
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconheart2"></span>
            <div class="name">
              heart2
            </div>
            <div class="code-name">.iconheart2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconkey"></span>
            <div class="name">
              key
            </div>
            <div class="code-name">.iconkey
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconlaptop"></span>
            <div class="name">
              laptop
            </div>
            <div class="code-name">.iconlaptop
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconlayers2"></span>
            <div class="name">
              layers2
            </div>
            <div class="code-name">.iconlayers2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconlifesaver"></span>
            <div class="name">
              lifesaver
            </div>
            <div class="code-name">.iconlifesaver
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconlightbulb"></span>
            <div class="name">
              lightbulb
            </div>
            <div class="code-name">.iconlightbulb
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconlinegraph"></span>
            <div class="name">
              linegraph
            </div>
            <div class="code-name">.iconlinegraph
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconlock3"></span>
            <div class="name">
              lock3
            </div>
            <div class="code-name">.iconlock3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconmegaphone"></span>
            <div class="name">
              megaphone
            </div>
            <div class="code-name">.iconmegaphone
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconmic2"></span>
            <div class="name">
              mic2
            </div>
            <div class="code-name">.iconmic2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconmap2"></span>
            <div class="name">
              map2
            </div>
            <div class="code-name">.iconmap2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconmappin"></span>
            <div class="name">
              map-pin
            </div>
            <div class="code-name">.iconmappin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconnewspaper"></span>
            <div class="name">
              newspaper
            </div>
            <div class="code-name">.iconnewspaper
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconpaintbrush"></span>
            <div class="name">
              paintbrush
            </div>
            <div class="code-name">.iconpaintbrush
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconpaperclip"></span>
            <div class="name">
              paperclip
            </div>
            <div class="code-name">.iconpaperclip
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconphone2"></span>
            <div class="name">
              phone2
            </div>
            <div class="code-name">.iconphone2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconpencil"></span>
            <div class="name">
              pencil
            </div>
            <div class="code-name">.iconpencil
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconpicture"></span>
            <div class="name">
              picture
            </div>
            <div class="code-name">.iconpicture
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconpictures"></span>
            <div class="name">
              pictures
            </div>
            <div class="code-name">.iconpictures
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconpiechart"></span>
            <div class="name">
              piechart
            </div>
            <div class="code-name">.iconpiechart
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconprofilefemale"></span>
            <div class="name">
              profile-female
            </div>
            <div class="code-name">.iconprofilefemale
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconprofilemale"></span>
            <div class="name">
              profile-male
            </div>
            <div class="code-name">.iconprofilemale
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconpuzzle"></span>
            <div class="name">
              puzzle
            </div>
            <div class="code-name">.iconpuzzle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconpresentation"></span>
            <div class="name">
              presentation
            </div>
            <div class="code-name">.iconpresentation
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconpricetags"></span>
            <div class="name">
              pricetags
            </div>
            <div class="code-name">.iconpricetags
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconprinter2"></span>
            <div class="name">
              printer2
            </div>
            <div class="code-name">.iconprinter2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconrefresh2"></span>
            <div class="name">
              refresh2
            </div>
            <div class="code-name">.iconrefresh2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconquote"></span>
            <div class="name">
              quote
            </div>
            <div class="code-name">.iconquote
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconrecycle"></span>
            <div class="name">
              recycle
            </div>
            <div class="code-name">.iconrecycle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconribbon2"></span>
            <div class="name">
              ribbon2
            </div>
            <div class="code-name">.iconribbon2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconscissors"></span>
            <div class="name">
              scissors
            </div>
            <div class="code-name">.iconscissors
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconscope"></span>
            <div class="name">
              scope
            </div>
            <div class="code-name">.iconscope
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsearch3"></span>
            <div class="name">
              search3
            </div>
            <div class="code-name">.iconsearch3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshield"></span>
            <div class="name">
              shield
            </div>
            <div class="code-name">.iconshield
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconspeedometer"></span>
            <div class="name">
              speedometer
            </div>
            <div class="code-name">.iconspeedometer
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconstrategy"></span>
            <div class="name">
              strategy
            </div>
            <div class="code-name">.iconstrategy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconstreetsign"></span>
            <div class="name">
              streetsign
            </div>
            <div class="code-name">.iconstreetsign
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icontablet"></span>
            <div class="name">
              tablet
            </div>
            <div class="code-name">.icontablet
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icontarget2"></span>
            <div class="name">
              target2
            </div>
            <div class="code-name">.icontarget2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icontoolbox"></span>
            <div class="name">
              toolbox
            </div>
            <div class="code-name">.icontoolbox
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icontools"></span>
            <div class="name">
              tools
            </div>
            <div class="code-name">.icontools
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icontools2"></span>
            <div class="name">
              tools-2
            </div>
            <div class="code-name">.icontools2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icontelescope"></span>
            <div class="name">
              telescope
            </div>
            <div class="code-name">.icontelescope
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconupload2"></span>
            <div class="name">
              upload2
            </div>
            <div class="code-name">.iconupload2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icontrophy"></span>
            <div class="name">
              trophy
            </div>
            <div class="code-name">.icontrophy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconvideo2"></span>
            <div class="name">
              video2
            </div>
            <div class="code-name">.iconvideo2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconbankcard"></span>
            <div class="name">
              bankcard
            </div>
            <div class="code-name">.iconbankcard
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconidcard"></span>
            <div class="name">
              idcard
            </div>
            <div class="code-name">.iconidcard
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconphone"></span>
            <div class="name">
              phone
            </div>
            <div class="code-name">.iconphone
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185029ipodstreamline"></span>
            <div class="name">
              185029 - ipod streamline
            </div>
            <div class="code-name">.icon185029ipodstreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185030cookpanpotstreamline"></span>
            <div class="name">
              185030 - cook pan pot streamline
            </div>
            <div class="code-name">.icon185030cookpanpotstreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185031shoessnickersstreamline"></span>
            <div class="name">
              185031 - shoes snickers streamline
            </div>
            <div class="code-name">.icon185031shoessnickersstreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185032ipadstreamline"></span>
            <div class="name">
              185032 - ipad streamline
            </div>
            <div class="code-name">.icon185032ipadstreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185033ipodmusicstreamline"></span>
            <div class="name">
              185033 - ipod music streamline
            </div>
            <div class="code-name">.icon185033ipodmusicstreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185034ipodminimusicstreamline"></span>
            <div class="name">
              185034 - ipod mini music streamline
            </div>
            <div class="code-name">.icon185034ipodminimusicstreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185035computerstreamline"></span>
            <div class="name">
              185035 - computer streamline
            </div>
            <div class="code-name">.icon185035computerstreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185036remotecontrolstreamline"></span>
            <div class="name">
              185036 - remote control streamline
            </div>
            <div class="code-name">.icon185036remotecontrolstreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185037browserstreamlinewindow"></span>
            <div class="name">
              185037 - browser streamline window
            </div>
            <div class="code-name">.icon185037browserstreamlinewindow
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185020macintosh"></span>
            <div class="name">
              185020 - macintosh
            </div>
            <div class="code-name">.icon185020macintosh
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185021bombbug"></span>
            <div class="name">
              185021 - bomb bug
            </div>
            <div class="code-name">.icon185021bombbug
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185022computermacintoshvintage"></span>
            <div class="name">
              185022 - computer macintosh vintage
            </div>
            <div class="code-name">.icon185022computermacintoshvintage
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185023computerimac"></span>
            <div class="name">
              185023 - computer imac
            </div>
            <div class="code-name">.icon185023computerimac
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185024computerimac"></span>
            <div class="name">
              185024 - computer imac
            </div>
            <div class="code-name">.icon185024computerimac
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185025ibooklaptop"></span>
            <div class="name">
              185025 - ibook laptop
            </div>
            <div class="code-name">.icon185025ibooklaptop
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185026laptopmacbookstreamline"></span>
            <div class="name">
              185026 - laptop macbook streamline
            </div>
            <div class="code-name">.icon185026laptopmacbookstreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185027computernetworkstreamline"></span>
            <div class="name">
              185027 - computer network streamline
            </div>
            <div class="code-name">.icon185027computernetworkstreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185028iphonestreamline"></span>
            <div class="name">
              185028 - iphone streamline
            </div>
            <div class="code-name">.icon185028iphonestreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185047penstreamline"></span>
            <div class="name">
              185047 - pen streamline
            </div>
            <div class="code-name">.icon185047penstreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185048penstreamline"></span>
            <div class="name">
              185048 - pen streamline
            </div>
            <div class="code-name">.icon185048penstreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185049designpencilrulestreamline"></span>
            <div class="name">
              185049 - design pencil rule streamline
            </div>
            <div class="code-name">.icon185049designpencilrulestreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185050eyedropperstreamline"></span>
            <div class="name">
              185050 - eye dropper streamline
            </div>
            <div class="code-name">.icon185050eyedropperstreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185051cropstreamline"></span>
            <div class="name">
              185051 - crop streamline
            </div>
            <div class="code-name">.icon185051cropstreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185052paintbucketstreamline"></span>
            <div class="name">
              185052 - paint bucket streamline
            </div>
            <div class="code-name">.icon185052paintbucketstreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185053brushpaintstreamline"></span>
            <div class="name">
              185053 - brush paint streamline
            </div>
            <div class="code-name">.icon185053brushpaintstreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185054paintingrollstreamline"></span>
            <div class="name">
              185054 - painting roll streamline
            </div>
            <div class="code-name">.icon185054paintingrollstreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185055paintingpalletstreamline"></span>
            <div class="name">
              185055 - painting pallet streamline
            </div>
            <div class="code-name">.icon185055paintingpalletstreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185038homehousestreamline"></span>
            <div class="name">
              185038 - home house streamline
            </div>
            <div class="code-name">.icon185038homehousestreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185039earthglobestreamline"></span>
            <div class="name">
              185039 - earth globe streamline
            </div>
            <div class="code-name">.icon185039earthglobestreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185040mappinstreamline"></span>
            <div class="name">
              185040 - map pin streamline
            </div>
            <div class="code-name">.icon185040mappinstreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185041arrowstreamlinetarget"></span>
            <div class="name">
              185041 - arrow streamline target
            </div>
            <div class="code-name">.icon185041arrowstreamlinetarget
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185042editmodifystreamline"></span>
            <div class="name">
              185042 - edit modify streamline
            </div>
            <div class="code-name">.icon185042editmodifystreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185043inkpenstreamline"></span>
            <div class="name">
              185043 - ink pen streamline
            </div>
            <div class="code-name">.icon185043inkpenstreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185044penstreamline"></span>
            <div class="name">
              185044 - pen streamline
            </div>
            <div class="code-name">.icon185044penstreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185045penstreamline"></span>
            <div class="name">
              185045 - pen streamline
            </div>
            <div class="code-name">.icon185045penstreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185046designgraphictabletstreamlinetablet"></span>
            <div class="name">
              185046 - design graphic tablet streamline tablet
            </div>
            <div class="code-name">.icon185046designgraphictabletstreamlinetablet
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185056stampstreamline"></span>
            <div class="name">
              185056 - stamp streamline
            </div>
            <div class="code-name">.icon185056stampstreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185057magicmagicwandstreamline"></span>
            <div class="name">
              185057 - magic magic wand streamline
            </div>
            <div class="code-name">.icon185057magicmagicwandstreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185058gridlinesstreamline"></span>
            <div class="name">
              185058 - grid lines streamline
            </div>
            <div class="code-name">.icon185058gridlinesstreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185059handlestreamlinevector"></span>
            <div class="name">
              185059 - handle streamline vector
            </div>
            <div class="code-name">.icon185059handlestreamlinevector
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185060magnetstreamline"></span>
            <div class="name">
              185060 - magnet streamline
            </div>
            <div class="code-name">.icon185060magnetstreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185061photopicturesstreamline"></span>
            <div class="name">
              185061 - photo pictures streamline
            </div>
            <div class="code-name">.icon185061photopicturesstreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185062cameraphotostreamline"></span>
            <div class="name">
              185062 - camera photo streamline
            </div>
            <div class="code-name">.icon185062cameraphotostreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185063cameraphotopolaroidstreamline"></span>
            <div class="name">
              185063 - camera photo polaroid streamline
            </div>
            <div class="code-name">.icon185063cameraphotopolaroidstreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185064picturestreamline"></span>
            <div class="name">
              185064 - picture streamline
            </div>
            <div class="code-name">.icon185064picturestreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185065framepicturestreamline"></span>
            <div class="name">
              185065 - frame picture streamline
            </div>
            <div class="code-name">.icon185065framepicturestreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185066picturestreamline"></span>
            <div class="name">
              185066 - picture streamline
            </div>
            <div class="code-name">.icon185066picturestreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185067camerastreamlinevideo"></span>
            <div class="name">
              185067 - camera streamline video
            </div>
            <div class="code-name">.icon185067camerastreamlinevideo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185068musicnotestreamline"></span>
            <div class="name">
              185068 - music note streamline
            </div>
            <div class="code-name">.icon185068musicnotestreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185069headsetsoundstreamline"></span>
            <div class="name">
              185069 - headset sound streamline
            </div>
            <div class="code-name">.icon185069headsetsoundstreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185070microrecordstreamline"></span>
            <div class="name">
              185070 - micro record streamline
            </div>
            <div class="code-name">.icon185070microrecordstreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185071musicspeakerstreamline"></span>
            <div class="name">
              185071 - music speaker streamline
            </div>
            <div class="code-name">.icon185071musicspeakerstreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185072bookreadstreamline"></span>
            <div class="name">
              185072 - book read streamline
            </div>
            <div class="code-name">.icon185072bookreadstreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185073bookdowloadstreamline"></span>
            <div class="name">
              185073 - book dowload streamline
            </div>
            <div class="code-name">.icon185073bookdowloadstreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185083likelovestreamline"></span>
            <div class="name">
              185083 - like love streamline
            </div>
            <div class="code-name">.icon185083likelovestreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185084crownkingstreamline"></span>
            <div class="name">
              185084 - crown king streamline
            </div>
            <div class="code-name">.icon185084crownkingstreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185085happysmileystreamline"></span>
            <div class="name">
              185085 - happy smiley streamline
            </div>
            <div class="code-name">.icon185085happysmileystreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185086mapstreamlineuser"></span>
            <div class="name">
              185086 - map streamline user
            </div>
            <div class="code-name">.icon185086mapstreamlineuser
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185087linkstreamline"></span>
            <div class="name">
              185087 - link streamline
            </div>
            <div class="code-name">.icon185087linkstreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185088locklockerstreamline"></span>
            <div class="name">
              185088 - lock locker streamline
            </div>
            <div class="code-name">.icon185088locklockerstreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185089lockerstreamlineunlock"></span>
            <div class="name">
              185089 - locker streamline unlock
            </div>
            <div class="code-name">.icon185089lockerstreamlineunlock
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185090deletegarbagestreamline"></span>
            <div class="name">
              185090 - delete garbage streamline
            </div>
            <div class="code-name">.icon185090deletegarbagestreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185091dangerdeathdeletedestroyskullstreamline"></span>
            <div class="name">
              185091 - danger death delete destroy skull streamline
            </div>
            <div class="code-name">.icon185091dangerdeathdeletedestroyskullstreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185074notebookstreamline"></span>
            <div class="name">
              185074 - notebook streamline
            </div>
            <div class="code-name">.icon185074notebookstreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185075envellopemailstreamline"></span>
            <div class="name">
              185075 - envellope mail streamline
            </div>
            <div class="code-name">.icon185075envellopemailstreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185076streamlinesuitcasetravel"></span>
            <div class="name">
              185076 - streamline suitcase travel
            </div>
            <div class="code-name">.icon185076streamlinesuitcasetravel
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185077firstaidmedecineshieldstreamline"></span>
            <div class="name">
              185077 - first aid medecine shield streamline
            </div>
            <div class="code-name">.icon185077firstaidmedecineshieldstreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185078emailmailstreamline"></span>
            <div class="name">
              185078 - email mail streamline
            </div>
            <div class="code-name">.icon185078emailmailstreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185079bubblecommentstreamlinetalk"></span>
            <div class="name">
              185079 - bubble comment streamline talk
            </div>
            <div class="code-name">.icon185079bubblecommentstreamlinetalk
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185080bubblelovestreamlinetalk"></span>
            <div class="name">
              185080 - bubble love streamline talk
            </div>
            <div class="code-name">.icon185080bubblelovestreamlinetalk
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185081speechstreamlinetalkuser"></span>
            <div class="name">
              185081 - speech streamline talk user
            </div>
            <div class="code-name">.icon185081speechstreamlinetalkuser
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185082manpeoplestreamlineuser"></span>
            <div class="name">
              185082 - man people streamline user
            </div>
            <div class="code-name">.icon185082manpeoplestreamlineuser
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185101caddieshoppingstreamline"></span>
            <div class="name">
              185101 - caddie shopping streamline
            </div>
            <div class="code-name">.icon185101caddieshoppingstreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185102receiptshoppingstreamline"></span>
            <div class="name">
              185102 - receipt shopping streamline
            </div>
            <div class="code-name">.icon185102receiptshoppingstreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185103bagshoppingstreamline"></span>
            <div class="name">
              185103 - bag shopping streamline
            </div>
            <div class="code-name">.icon185103bagshoppingstreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185104streamlineumbrellaweather"></span>
            <div class="name">
              185104 - streamline umbrella weather
            </div>
            <div class="code-name">.icon185104streamlineumbrellaweather
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185105drugmedecinestreamlinesyringue"></span>
            <div class="name">
              185105 - drug medecine streamline syringue
            </div>
            <div class="code-name">.icon185105drugmedecinestreamlinesyringue
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185106armchairchairstreamline"></span>
            <div class="name">
              185106 - armchair chair streamline
            </div>
            <div class="code-name">.icon185106armchairchairstreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185107backpackstreamlinetrekking"></span>
            <div class="name">
              185107 - backpack streamline trekking
            </div>
            <div class="code-name">.icon185107backpackstreamlinetrekking
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185108chaplinhatmoviestreamline"></span>
            <div class="name">
              185108 - chaplin hat movie streamline
            </div>
            <div class="code-name">.icon185108chaplinhatmoviestreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185109cocktailmojitostreamline"></span>
            <div class="name">
              185109 - cocktail mojito streamline
            </div>
            <div class="code-name">.icon185109cocktailmojitostreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185092clockstreamlinetime"></span>
            <div class="name">
              185092 - clock streamline time
            </div>
            <div class="code-name">.icon185092clockstreamlinetime
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185093dashboardspeedstreamline"></span>
            <div class="name">
              185093 - dashboard speed streamline
            </div>
            <div class="code-name">.icon185093dashboardspeedstreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185094settingsstreamline"></span>
            <div class="name">
              185094 - settings streamline
            </div>
            <div class="code-name">.icon185094settingsstreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185095settingsstreamline"></span>
            <div class="name">
              185095 - settings streamline
            </div>
            <div class="code-name">.icon185095settingsstreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185096settingsstreamline"></span>
            <div class="name">
              185096 - settings streamline
            </div>
            <div class="code-name">.icon185096settingsstreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185097databasestreamline"></span>
            <div class="name">
              185097 - database streamline
            </div>
            <div class="code-name">.icon185097databasestreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185098streamlinesync"></span>
            <div class="name">
              185098 - streamline sync
            </div>
            <div class="code-name">.icon185098streamlinesync
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185099factoryliftstreamlinewarehouse"></span>
            <div class="name">
              185099 - factory lift streamline warehouse
            </div>
            <div class="code-name">.icon185099factoryliftstreamlinewarehouse
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185100caddieshopshoppingstreamline"></span>
            <div class="name">
              185100 - caddie shop shopping streamline
            </div>
            <div class="code-name">.icon185100caddieshopshoppingstreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185110divingleisureseasportstreamline"></span>
            <div class="name">
              185110 - diving leisure sea sport streamline
            </div>
            <div class="code-name">.icon185110divingleisureseasportstreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185111monoclemustachestreamline"></span>
            <div class="name">
              185111 - monocle mustache streamline
            </div>
            <div class="code-name">.icon185111monoclemustachestreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185112baristacoffeeespressostreamline"></span>
            <div class="name">
              185112 - barista coffee espresso streamline
            </div>
            <div class="code-name">.icon185112baristacoffeeespressostreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185113coffeestreamline"></span>
            <div class="name">
              185113 - coffee streamline
            </div>
            <div class="code-name">.icon185113coffeestreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185114cheffoodrestaurantstreamline"></span>
            <div class="name">
              185114 - chef food restaurant streamline
            </div>
            <div class="code-name">.icon185114cheffoodrestaurantstreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185115barbecueeatfoodstreamline"></span>
            <div class="name">
              185115 - barbecue eat food streamline
            </div>
            <div class="code-name">.icon185115barbecueeatfoodstreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185116eatfoodhotdogstreamline"></span>
            <div class="name">
              185116 - eat food hotdog streamline
            </div>
            <div class="code-name">.icon185116eatfoodhotdogstreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185117foodicecreamstreamline"></span>
            <div class="name">
              185117 - food ice cream streamline
            </div>
            <div class="code-name">.icon185117foodicecreamstreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185118japanstreamlinetea"></span>
            <div class="name">
              185118 - japan streamline tea
            </div>
            <div class="code-name">.icon185118japanstreamlinetea
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon185119eatfoodforkknifestreamline"></span>
            <div class="name">
              185119 - eat food fork knife streamline
            </div>
            <div class="code-name">.icon185119eatfoodforkknifestreamline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconadjustments"></span>
            <div class="name">
              adjustments
            </div>
            <div class="code-name">.iconadjustments
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconalarmclock"></span>
            <div class="name">
              alarmclock
            </div>
            <div class="code-name">.iconalarmclock
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconanchor"></span>
            <div class="name">
              anchor
            </div>
            <div class="code-name">.iconanchor
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconanchor2"></span>
            <div class="name">
              anchor2
            </div>
            <div class="code-name">.iconanchor2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconaperture"></span>
            <div class="name">
              aperture
            </div>
            <div class="code-name">.iconaperture
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconattachment2"></span>
            <div class="name">
              attachment2
            </div>
            <div class="code-name">.iconattachment2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconbookopen"></span>
            <div class="name">
              book-open
            </div>
            <div class="code-name">.iconbookopen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconbargraph"></span>
            <div class="name">
              bargraph
            </div>
            <div class="code-name">.iconbargraph
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconbasket"></span>
            <div class="name">
              basket
            </div>
            <div class="code-name">.iconbasket
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconbrowser"></span>
            <div class="name">
              browser
            </div>
            <div class="code-name">.iconbrowser
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconcalendar"></span>
            <div class="name">
              calendar
            </div>
            <div class="code-name">.iconcalendar
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconbriefcase2"></span>
            <div class="name">
              briefcase2
            </div>
            <div class="code-name">.iconbriefcase2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconcaution"></span>
            <div class="name">
              caution
            </div>
            <div class="code-name">.iconcaution
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconchat2"></span>
            <div class="name">
              chat2
            </div>
            <div class="code-name">.iconchat2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconcamera3"></span>
            <div class="name">
              camera3
            </div>
            <div class="code-name">.iconcamera3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconclipboard2"></span>
            <div class="name">
              clipboard2
            </div>
            <div class="code-name">.iconclipboard2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconclock2"></span>
            <div class="name">
              clock2
            </div>
            <div class="code-name">.iconclock2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconcirclecompass"></span>
            <div class="name">
              circle-compass
            </div>
            <div class="code-name">.iconcirclecompass
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconminsu"></span>
            <div class="name">
              民俗民风
            </div>
            <div class="code-name">.iconminsu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconxiqu"></span>
            <div class="name">
              戏曲
            </div>
            <div class="code-name">.iconxiqu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconguzhenminsu"></span>
            <div class="name">
              古镇民俗
            </div>
            <div class="code-name">.iconguzhenminsu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconquanzhou"></span>
            <div class="name">
              泉州
            </div>
            <div class="code-name">.iconquanzhou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfangyan"></span>
            <div class="name">
              方言小品
            </div>
            <div class="code-name">.iconfangyan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconjianzhu"></span>
            <div class="name">
              建筑
            </div>
            <div class="code-name">.iconjianzhu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icongaikuang1"></span>
            <div class="name">
              概况
            </div>
            <div class="code-name">.icongaikuang1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconzongjiaowenhua"></span>
            <div class="name">
              宗教文化
            </div>
            <div class="code-name">.iconzongjiaowenhua
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconjianzhu1"></span>
            <div class="name">
              ST建筑
            </div>
            <div class="code-name">.iconjianzhu1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconyouji"></span>
            <div class="name">
              游记
            </div>
            <div class="code-name">.iconyouji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icongaikuangfenceng"></span>
            <div class="name">
              概况 分层
            </div>
            <div class="code-name">.icongaikuangfenceng
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
          <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont iconxxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconcompass"></use>
                </svg>
                <div class="name">compass</div>
                <div class="code-name">#iconcompass</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconcloud3"></use>
                </svg>
                <div class="name">cloud3</div>
                <div class="code-name">#iconcloud3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icondesktop"></use>
                </svg>
                <div class="name">desktop</div>
                <div class="code-name">#icondesktop</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icondocument"></use>
                </svg>
                <div class="name">document</div>
                <div class="code-name">#icondocument</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icondocuments"></use>
                </svg>
                <div class="name">documents</div>
                <div class="code-name">#icondocuments</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icondownload2"></use>
                </svg>
                <div class="name">download2</div>
                <div class="code-name">#icondownload2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconexpand2"></use>
                </svg>
                <div class="name">expand2</div>
                <div class="code-name">#iconexpand2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconedit2"></use>
                </svg>
                <div class="name">edit2</div>
                <div class="code-name">#iconedit2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconenvelope"></use>
                </svg>
                <div class="name">envelope</div>
                <div class="code-name">#iconenvelope</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfocus"></use>
                </svg>
                <div class="name">focus</div>
                <div class="code-name">#iconfocus</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconflag3"></use>
                </svg>
                <div class="name">flag3</div>
                <div class="code-name">#iconflag3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icongrid2"></use>
                </svg>
                <div class="name">grid2</div>
                <div class="code-name">#icongrid2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconhourglass"></use>
                </svg>
                <div class="name">hourglass</div>
                <div class="code-name">#iconhourglass</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconheart2"></use>
                </svg>
                <div class="name">heart2</div>
                <div class="code-name">#iconheart2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconkey"></use>
                </svg>
                <div class="name">key</div>
                <div class="code-name">#iconkey</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconlaptop"></use>
                </svg>
                <div class="name">laptop</div>
                <div class="code-name">#iconlaptop</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconlayers2"></use>
                </svg>
                <div class="name">layers2</div>
                <div class="code-name">#iconlayers2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconlifesaver"></use>
                </svg>
                <div class="name">lifesaver</div>
                <div class="code-name">#iconlifesaver</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconlightbulb"></use>
                </svg>
                <div class="name">lightbulb</div>
                <div class="code-name">#iconlightbulb</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconlinegraph"></use>
                </svg>
                <div class="name">linegraph</div>
                <div class="code-name">#iconlinegraph</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconlock3"></use>
                </svg>
                <div class="name">lock3</div>
                <div class="code-name">#iconlock3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconmegaphone"></use>
                </svg>
                <div class="name">megaphone</div>
                <div class="code-name">#iconmegaphone</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconmic2"></use>
                </svg>
                <div class="name">mic2</div>
                <div class="code-name">#iconmic2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconmap2"></use>
                </svg>
                <div class="name">map2</div>
                <div class="code-name">#iconmap2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconmappin"></use>
                </svg>
                <div class="name">map-pin</div>
                <div class="code-name">#iconmappin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconnewspaper"></use>
                </svg>
                <div class="name">newspaper</div>
                <div class="code-name">#iconnewspaper</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconpaintbrush"></use>
                </svg>
                <div class="name">paintbrush</div>
                <div class="code-name">#iconpaintbrush</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconpaperclip"></use>
                </svg>
                <div class="name">paperclip</div>
                <div class="code-name">#iconpaperclip</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconphone2"></use>
                </svg>
                <div class="name">phone2</div>
                <div class="code-name">#iconphone2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconpencil"></use>
                </svg>
                <div class="name">pencil</div>
                <div class="code-name">#iconpencil</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconpicture"></use>
                </svg>
                <div class="name">picture</div>
                <div class="code-name">#iconpicture</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconpictures"></use>
                </svg>
                <div class="name">pictures</div>
                <div class="code-name">#iconpictures</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconpiechart"></use>
                </svg>
                <div class="name">piechart</div>
                <div class="code-name">#iconpiechart</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconprofilefemale"></use>
                </svg>
                <div class="name">profile-female</div>
                <div class="code-name">#iconprofilefemale</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconprofilemale"></use>
                </svg>
                <div class="name">profile-male</div>
                <div class="code-name">#iconprofilemale</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconpuzzle"></use>
                </svg>
                <div class="name">puzzle</div>
                <div class="code-name">#iconpuzzle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconpresentation"></use>
                </svg>
                <div class="name">presentation</div>
                <div class="code-name">#iconpresentation</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconpricetags"></use>
                </svg>
                <div class="name">pricetags</div>
                <div class="code-name">#iconpricetags</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconprinter2"></use>
                </svg>
                <div class="name">printer2</div>
                <div class="code-name">#iconprinter2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconrefresh2"></use>
                </svg>
                <div class="name">refresh2</div>
                <div class="code-name">#iconrefresh2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconquote"></use>
                </svg>
                <div class="name">quote</div>
                <div class="code-name">#iconquote</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconrecycle"></use>
                </svg>
                <div class="name">recycle</div>
                <div class="code-name">#iconrecycle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconribbon2"></use>
                </svg>
                <div class="name">ribbon2</div>
                <div class="code-name">#iconribbon2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconscissors"></use>
                </svg>
                <div class="name">scissors</div>
                <div class="code-name">#iconscissors</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconscope"></use>
                </svg>
                <div class="name">scope</div>
                <div class="code-name">#iconscope</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsearch3"></use>
                </svg>
                <div class="name">search3</div>
                <div class="code-name">#iconsearch3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshield"></use>
                </svg>
                <div class="name">shield</div>
                <div class="code-name">#iconshield</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconspeedometer"></use>
                </svg>
                <div class="name">speedometer</div>
                <div class="code-name">#iconspeedometer</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconstrategy"></use>
                </svg>
                <div class="name">strategy</div>
                <div class="code-name">#iconstrategy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconstreetsign"></use>
                </svg>
                <div class="name">streetsign</div>
                <div class="code-name">#iconstreetsign</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icontablet"></use>
                </svg>
                <div class="name">tablet</div>
                <div class="code-name">#icontablet</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icontarget2"></use>
                </svg>
                <div class="name">target2</div>
                <div class="code-name">#icontarget2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icontoolbox"></use>
                </svg>
                <div class="name">toolbox</div>
                <div class="code-name">#icontoolbox</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icontools"></use>
                </svg>
                <div class="name">tools</div>
                <div class="code-name">#icontools</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icontools2"></use>
                </svg>
                <div class="name">tools-2</div>
                <div class="code-name">#icontools2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icontelescope"></use>
                </svg>
                <div class="name">telescope</div>
                <div class="code-name">#icontelescope</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconupload2"></use>
                </svg>
                <div class="name">upload2</div>
                <div class="code-name">#iconupload2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icontrophy"></use>
                </svg>
                <div class="name">trophy</div>
                <div class="code-name">#icontrophy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconvideo2"></use>
                </svg>
                <div class="name">video2</div>
                <div class="code-name">#iconvideo2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconbankcard"></use>
                </svg>
                <div class="name">bankcard</div>
                <div class="code-name">#iconbankcard</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconidcard"></use>
                </svg>
                <div class="name">idcard</div>
                <div class="code-name">#iconidcard</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconphone"></use>
                </svg>
                <div class="name">phone</div>
                <div class="code-name">#iconphone</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185029ipodstreamline"></use>
                </svg>
                <div class="name">185029 - ipod streamline</div>
                <div class="code-name">#icon185029ipodstreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185030cookpanpotstreamline"></use>
                </svg>
                <div class="name">185030 - cook pan pot streamline</div>
                <div class="code-name">#icon185030cookpanpotstreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185031shoessnickersstreamline"></use>
                </svg>
                <div class="name">185031 - shoes snickers streamline</div>
                <div class="code-name">#icon185031shoessnickersstreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185032ipadstreamline"></use>
                </svg>
                <div class="name">185032 - ipad streamline</div>
                <div class="code-name">#icon185032ipadstreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185033ipodmusicstreamline"></use>
                </svg>
                <div class="name">185033 - ipod music streamline</div>
                <div class="code-name">#icon185033ipodmusicstreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185034ipodminimusicstreamline"></use>
                </svg>
                <div class="name">185034 - ipod mini music streamline</div>
                <div class="code-name">#icon185034ipodminimusicstreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185035computerstreamline"></use>
                </svg>
                <div class="name">185035 - computer streamline</div>
                <div class="code-name">#icon185035computerstreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185036remotecontrolstreamline"></use>
                </svg>
                <div class="name">185036 - remote control streamline</div>
                <div class="code-name">#icon185036remotecontrolstreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185037browserstreamlinewindow"></use>
                </svg>
                <div class="name">185037 - browser streamline window</div>
                <div class="code-name">#icon185037browserstreamlinewindow</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185020macintosh"></use>
                </svg>
                <div class="name">185020 - macintosh</div>
                <div class="code-name">#icon185020macintosh</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185021bombbug"></use>
                </svg>
                <div class="name">185021 - bomb bug</div>
                <div class="code-name">#icon185021bombbug</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185022computermacintoshvintage"></use>
                </svg>
                <div class="name">185022 - computer macintosh vintage</div>
                <div class="code-name">#icon185022computermacintoshvintage</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185023computerimac"></use>
                </svg>
                <div class="name">185023 - computer imac</div>
                <div class="code-name">#icon185023computerimac</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185024computerimac"></use>
                </svg>
                <div class="name">185024 - computer imac</div>
                <div class="code-name">#icon185024computerimac</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185025ibooklaptop"></use>
                </svg>
                <div class="name">185025 - ibook laptop</div>
                <div class="code-name">#icon185025ibooklaptop</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185026laptopmacbookstreamline"></use>
                </svg>
                <div class="name">185026 - laptop macbook streamline</div>
                <div class="code-name">#icon185026laptopmacbookstreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185027computernetworkstreamline"></use>
                </svg>
                <div class="name">185027 - computer network streamline</div>
                <div class="code-name">#icon185027computernetworkstreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185028iphonestreamline"></use>
                </svg>
                <div class="name">185028 - iphone streamline</div>
                <div class="code-name">#icon185028iphonestreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185047penstreamline"></use>
                </svg>
                <div class="name">185047 - pen streamline</div>
                <div class="code-name">#icon185047penstreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185048penstreamline"></use>
                </svg>
                <div class="name">185048 - pen streamline</div>
                <div class="code-name">#icon185048penstreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185049designpencilrulestreamline"></use>
                </svg>
                <div class="name">185049 - design pencil rule streamline</div>
                <div class="code-name">#icon185049designpencilrulestreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185050eyedropperstreamline"></use>
                </svg>
                <div class="name">185050 - eye dropper streamline</div>
                <div class="code-name">#icon185050eyedropperstreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185051cropstreamline"></use>
                </svg>
                <div class="name">185051 - crop streamline</div>
                <div class="code-name">#icon185051cropstreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185052paintbucketstreamline"></use>
                </svg>
                <div class="name">185052 - paint bucket streamline</div>
                <div class="code-name">#icon185052paintbucketstreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185053brushpaintstreamline"></use>
                </svg>
                <div class="name">185053 - brush paint streamline</div>
                <div class="code-name">#icon185053brushpaintstreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185054paintingrollstreamline"></use>
                </svg>
                <div class="name">185054 - painting roll streamline</div>
                <div class="code-name">#icon185054paintingrollstreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185055paintingpalletstreamline"></use>
                </svg>
                <div class="name">185055 - painting pallet streamline</div>
                <div class="code-name">#icon185055paintingpalletstreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185038homehousestreamline"></use>
                </svg>
                <div class="name">185038 - home house streamline</div>
                <div class="code-name">#icon185038homehousestreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185039earthglobestreamline"></use>
                </svg>
                <div class="name">185039 - earth globe streamline</div>
                <div class="code-name">#icon185039earthglobestreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185040mappinstreamline"></use>
                </svg>
                <div class="name">185040 - map pin streamline</div>
                <div class="code-name">#icon185040mappinstreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185041arrowstreamlinetarget"></use>
                </svg>
                <div class="name">185041 - arrow streamline target</div>
                <div class="code-name">#icon185041arrowstreamlinetarget</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185042editmodifystreamline"></use>
                </svg>
                <div class="name">185042 - edit modify streamline</div>
                <div class="code-name">#icon185042editmodifystreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185043inkpenstreamline"></use>
                </svg>
                <div class="name">185043 - ink pen streamline</div>
                <div class="code-name">#icon185043inkpenstreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185044penstreamline"></use>
                </svg>
                <div class="name">185044 - pen streamline</div>
                <div class="code-name">#icon185044penstreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185045penstreamline"></use>
                </svg>
                <div class="name">185045 - pen streamline</div>
                <div class="code-name">#icon185045penstreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185046designgraphictabletstreamlinetablet"></use>
                </svg>
                <div class="name">185046 - design graphic tablet streamline tablet</div>
                <div class="code-name">#icon185046designgraphictabletstreamlinetablet</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185056stampstreamline"></use>
                </svg>
                <div class="name">185056 - stamp streamline</div>
                <div class="code-name">#icon185056stampstreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185057magicmagicwandstreamline"></use>
                </svg>
                <div class="name">185057 - magic magic wand streamline</div>
                <div class="code-name">#icon185057magicmagicwandstreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185058gridlinesstreamline"></use>
                </svg>
                <div class="name">185058 - grid lines streamline</div>
                <div class="code-name">#icon185058gridlinesstreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185059handlestreamlinevector"></use>
                </svg>
                <div class="name">185059 - handle streamline vector</div>
                <div class="code-name">#icon185059handlestreamlinevector</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185060magnetstreamline"></use>
                </svg>
                <div class="name">185060 - magnet streamline</div>
                <div class="code-name">#icon185060magnetstreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185061photopicturesstreamline"></use>
                </svg>
                <div class="name">185061 - photo pictures streamline</div>
                <div class="code-name">#icon185061photopicturesstreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185062cameraphotostreamline"></use>
                </svg>
                <div class="name">185062 - camera photo streamline</div>
                <div class="code-name">#icon185062cameraphotostreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185063cameraphotopolaroidstreamline"></use>
                </svg>
                <div class="name">185063 - camera photo polaroid streamline</div>
                <div class="code-name">#icon185063cameraphotopolaroidstreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185064picturestreamline"></use>
                </svg>
                <div class="name">185064 - picture streamline</div>
                <div class="code-name">#icon185064picturestreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185065framepicturestreamline"></use>
                </svg>
                <div class="name">185065 - frame picture streamline</div>
                <div class="code-name">#icon185065framepicturestreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185066picturestreamline"></use>
                </svg>
                <div class="name">185066 - picture streamline</div>
                <div class="code-name">#icon185066picturestreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185067camerastreamlinevideo"></use>
                </svg>
                <div class="name">185067 - camera streamline video</div>
                <div class="code-name">#icon185067camerastreamlinevideo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185068musicnotestreamline"></use>
                </svg>
                <div class="name">185068 - music note streamline</div>
                <div class="code-name">#icon185068musicnotestreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185069headsetsoundstreamline"></use>
                </svg>
                <div class="name">185069 - headset sound streamline</div>
                <div class="code-name">#icon185069headsetsoundstreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185070microrecordstreamline"></use>
                </svg>
                <div class="name">185070 - micro record streamline</div>
                <div class="code-name">#icon185070microrecordstreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185071musicspeakerstreamline"></use>
                </svg>
                <div class="name">185071 - music speaker streamline</div>
                <div class="code-name">#icon185071musicspeakerstreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185072bookreadstreamline"></use>
                </svg>
                <div class="name">185072 - book read streamline</div>
                <div class="code-name">#icon185072bookreadstreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185073bookdowloadstreamline"></use>
                </svg>
                <div class="name">185073 - book dowload streamline</div>
                <div class="code-name">#icon185073bookdowloadstreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185083likelovestreamline"></use>
                </svg>
                <div class="name">185083 - like love streamline</div>
                <div class="code-name">#icon185083likelovestreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185084crownkingstreamline"></use>
                </svg>
                <div class="name">185084 - crown king streamline</div>
                <div class="code-name">#icon185084crownkingstreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185085happysmileystreamline"></use>
                </svg>
                <div class="name">185085 - happy smiley streamline</div>
                <div class="code-name">#icon185085happysmileystreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185086mapstreamlineuser"></use>
                </svg>
                <div class="name">185086 - map streamline user</div>
                <div class="code-name">#icon185086mapstreamlineuser</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185087linkstreamline"></use>
                </svg>
                <div class="name">185087 - link streamline</div>
                <div class="code-name">#icon185087linkstreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185088locklockerstreamline"></use>
                </svg>
                <div class="name">185088 - lock locker streamline</div>
                <div class="code-name">#icon185088locklockerstreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185089lockerstreamlineunlock"></use>
                </svg>
                <div class="name">185089 - locker streamline unlock</div>
                <div class="code-name">#icon185089lockerstreamlineunlock</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185090deletegarbagestreamline"></use>
                </svg>
                <div class="name">185090 - delete garbage streamline</div>
                <div class="code-name">#icon185090deletegarbagestreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185091dangerdeathdeletedestroyskullstreamline"></use>
                </svg>
                <div class="name">185091 - danger death delete destroy skull streamline</div>
                <div class="code-name">#icon185091dangerdeathdeletedestroyskullstreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185074notebookstreamline"></use>
                </svg>
                <div class="name">185074 - notebook streamline</div>
                <div class="code-name">#icon185074notebookstreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185075envellopemailstreamline"></use>
                </svg>
                <div class="name">185075 - envellope mail streamline</div>
                <div class="code-name">#icon185075envellopemailstreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185076streamlinesuitcasetravel"></use>
                </svg>
                <div class="name">185076 - streamline suitcase travel</div>
                <div class="code-name">#icon185076streamlinesuitcasetravel</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185077firstaidmedecineshieldstreamline"></use>
                </svg>
                <div class="name">185077 - first aid medecine shield streamline</div>
                <div class="code-name">#icon185077firstaidmedecineshieldstreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185078emailmailstreamline"></use>
                </svg>
                <div class="name">185078 - email mail streamline</div>
                <div class="code-name">#icon185078emailmailstreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185079bubblecommentstreamlinetalk"></use>
                </svg>
                <div class="name">185079 - bubble comment streamline talk</div>
                <div class="code-name">#icon185079bubblecommentstreamlinetalk</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185080bubblelovestreamlinetalk"></use>
                </svg>
                <div class="name">185080 - bubble love streamline talk</div>
                <div class="code-name">#icon185080bubblelovestreamlinetalk</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185081speechstreamlinetalkuser"></use>
                </svg>
                <div class="name">185081 - speech streamline talk user</div>
                <div class="code-name">#icon185081speechstreamlinetalkuser</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185082manpeoplestreamlineuser"></use>
                </svg>
                <div class="name">185082 - man people streamline user</div>
                <div class="code-name">#icon185082manpeoplestreamlineuser</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185101caddieshoppingstreamline"></use>
                </svg>
                <div class="name">185101 - caddie shopping streamline</div>
                <div class="code-name">#icon185101caddieshoppingstreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185102receiptshoppingstreamline"></use>
                </svg>
                <div class="name">185102 - receipt shopping streamline</div>
                <div class="code-name">#icon185102receiptshoppingstreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185103bagshoppingstreamline"></use>
                </svg>
                <div class="name">185103 - bag shopping streamline</div>
                <div class="code-name">#icon185103bagshoppingstreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185104streamlineumbrellaweather"></use>
                </svg>
                <div class="name">185104 - streamline umbrella weather</div>
                <div class="code-name">#icon185104streamlineumbrellaweather</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185105drugmedecinestreamlinesyringue"></use>
                </svg>
                <div class="name">185105 - drug medecine streamline syringue</div>
                <div class="code-name">#icon185105drugmedecinestreamlinesyringue</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185106armchairchairstreamline"></use>
                </svg>
                <div class="name">185106 - armchair chair streamline</div>
                <div class="code-name">#icon185106armchairchairstreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185107backpackstreamlinetrekking"></use>
                </svg>
                <div class="name">185107 - backpack streamline trekking</div>
                <div class="code-name">#icon185107backpackstreamlinetrekking</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185108chaplinhatmoviestreamline"></use>
                </svg>
                <div class="name">185108 - chaplin hat movie streamline</div>
                <div class="code-name">#icon185108chaplinhatmoviestreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185109cocktailmojitostreamline"></use>
                </svg>
                <div class="name">185109 - cocktail mojito streamline</div>
                <div class="code-name">#icon185109cocktailmojitostreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185092clockstreamlinetime"></use>
                </svg>
                <div class="name">185092 - clock streamline time</div>
                <div class="code-name">#icon185092clockstreamlinetime</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185093dashboardspeedstreamline"></use>
                </svg>
                <div class="name">185093 - dashboard speed streamline</div>
                <div class="code-name">#icon185093dashboardspeedstreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185094settingsstreamline"></use>
                </svg>
                <div class="name">185094 - settings streamline</div>
                <div class="code-name">#icon185094settingsstreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185095settingsstreamline"></use>
                </svg>
                <div class="name">185095 - settings streamline</div>
                <div class="code-name">#icon185095settingsstreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185096settingsstreamline"></use>
                </svg>
                <div class="name">185096 - settings streamline</div>
                <div class="code-name">#icon185096settingsstreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185097databasestreamline"></use>
                </svg>
                <div class="name">185097 - database streamline</div>
                <div class="code-name">#icon185097databasestreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185098streamlinesync"></use>
                </svg>
                <div class="name">185098 - streamline sync</div>
                <div class="code-name">#icon185098streamlinesync</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185099factoryliftstreamlinewarehouse"></use>
                </svg>
                <div class="name">185099 - factory lift streamline warehouse</div>
                <div class="code-name">#icon185099factoryliftstreamlinewarehouse</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185100caddieshopshoppingstreamline"></use>
                </svg>
                <div class="name">185100 - caddie shop shopping streamline</div>
                <div class="code-name">#icon185100caddieshopshoppingstreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185110divingleisureseasportstreamline"></use>
                </svg>
                <div class="name">185110 - diving leisure sea sport streamline</div>
                <div class="code-name">#icon185110divingleisureseasportstreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185111monoclemustachestreamline"></use>
                </svg>
                <div class="name">185111 - monocle mustache streamline</div>
                <div class="code-name">#icon185111monoclemustachestreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185112baristacoffeeespressostreamline"></use>
                </svg>
                <div class="name">185112 - barista coffee espresso streamline</div>
                <div class="code-name">#icon185112baristacoffeeespressostreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185113coffeestreamline"></use>
                </svg>
                <div class="name">185113 - coffee streamline</div>
                <div class="code-name">#icon185113coffeestreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185114cheffoodrestaurantstreamline"></use>
                </svg>
                <div class="name">185114 - chef food restaurant streamline</div>
                <div class="code-name">#icon185114cheffoodrestaurantstreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185115barbecueeatfoodstreamline"></use>
                </svg>
                <div class="name">185115 - barbecue eat food streamline</div>
                <div class="code-name">#icon185115barbecueeatfoodstreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185116eatfoodhotdogstreamline"></use>
                </svg>
                <div class="name">185116 - eat food hotdog streamline</div>
                <div class="code-name">#icon185116eatfoodhotdogstreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185117foodicecreamstreamline"></use>
                </svg>
                <div class="name">185117 - food ice cream streamline</div>
                <div class="code-name">#icon185117foodicecreamstreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185118japanstreamlinetea"></use>
                </svg>
                <div class="name">185118 - japan streamline tea</div>
                <div class="code-name">#icon185118japanstreamlinetea</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon185119eatfoodforkknifestreamline"></use>
                </svg>
                <div class="name">185119 - eat food fork knife streamline</div>
                <div class="code-name">#icon185119eatfoodforkknifestreamline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconadjustments"></use>
                </svg>
                <div class="name">adjustments</div>
                <div class="code-name">#iconadjustments</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconalarmclock"></use>
                </svg>
                <div class="name">alarmclock</div>
                <div class="code-name">#iconalarmclock</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconanchor"></use>
                </svg>
                <div class="name">anchor</div>
                <div class="code-name">#iconanchor</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconanchor2"></use>
                </svg>
                <div class="name">anchor2</div>
                <div class="code-name">#iconanchor2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconaperture"></use>
                </svg>
                <div class="name">aperture</div>
                <div class="code-name">#iconaperture</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconattachment2"></use>
                </svg>
                <div class="name">attachment2</div>
                <div class="code-name">#iconattachment2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconbookopen"></use>
                </svg>
                <div class="name">book-open</div>
                <div class="code-name">#iconbookopen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconbargraph"></use>
                </svg>
                <div class="name">bargraph</div>
                <div class="code-name">#iconbargraph</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconbasket"></use>
                </svg>
                <div class="name">basket</div>
                <div class="code-name">#iconbasket</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconbrowser"></use>
                </svg>
                <div class="name">browser</div>
                <div class="code-name">#iconbrowser</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconcalendar"></use>
                </svg>
                <div class="name">calendar</div>
                <div class="code-name">#iconcalendar</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconbriefcase2"></use>
                </svg>
                <div class="name">briefcase2</div>
                <div class="code-name">#iconbriefcase2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconcaution"></use>
                </svg>
                <div class="name">caution</div>
                <div class="code-name">#iconcaution</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconchat2"></use>
                </svg>
                <div class="name">chat2</div>
                <div class="code-name">#iconchat2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconcamera3"></use>
                </svg>
                <div class="name">camera3</div>
                <div class="code-name">#iconcamera3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconclipboard2"></use>
                </svg>
                <div class="name">clipboard2</div>
                <div class="code-name">#iconclipboard2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconclock2"></use>
                </svg>
                <div class="name">clock2</div>
                <div class="code-name">#iconclock2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconcirclecompass"></use>
                </svg>
                <div class="name">circle-compass</div>
                <div class="code-name">#iconcirclecompass</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconminsu"></use>
                </svg>
                <div class="name">民俗民风</div>
                <div class="code-name">#iconminsu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconxiqu"></use>
                </svg>
                <div class="name">戏曲</div>
                <div class="code-name">#iconxiqu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconguzhenminsu"></use>
                </svg>
                <div class="name">古镇民俗</div>
                <div class="code-name">#iconguzhenminsu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconquanzhou"></use>
                </svg>
                <div class="name">泉州</div>
                <div class="code-name">#iconquanzhou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfangyan"></use>
                </svg>
                <div class="name">方言小品</div>
                <div class="code-name">#iconfangyan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconjianzhu"></use>
                </svg>
                <div class="name">建筑</div>
                <div class="code-name">#iconjianzhu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icongaikuang1"></use>
                </svg>
                <div class="name">概况</div>
                <div class="code-name">#icongaikuang1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconzongjiaowenhua"></use>
                </svg>
                <div class="name">宗教文化</div>
                <div class="code-name">#iconzongjiaowenhua</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconjianzhu1"></use>
                </svg>
                <div class="name">ST建筑</div>
                <div class="code-name">#iconjianzhu1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconyouji"></use>
                </svg>
                <div class="name">游记</div>
                <div class="code-name">#iconyouji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icongaikuangfenceng"></use>
                </svg>
                <div class="name">概况 分层</div>
                <div class="code-name">#icongaikuangfenceng</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
